<template>
	<div class="table-search-container" v-if="props.isShow">
		<el-form ref="tableSearchRef" :model="state.form" size="default" label-width="100px" class="table-form">
			<el-row>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
					<el-form-item class="table-form-btn" label-width="10px">
						<div>
              <el-button size="default" type="success" @click="openEdit('beifen')">备份数据库</el-button>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';

// 定义父组件传过来的值
const props = defineProps({
	// 搜索表单
	search: {
		type: Array,
		default: () => [],
	},
	isShow: {
        type: Boolean,
        default: () => true,
    },
	isdelete:{
		type: Boolean,
		default:()=>false,
	},
	isadd:{
		type: Boolean,
		default:()=>true,
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['onOpen']);
// 定义变量内容
const tableSearchRef = ref<FormInstance>();
const state = reactive({
	form: {},
	isToggle: false,
});


//新增
const openEdit = (type:string) => {
	emit('onOpen',type);
};

// 页面加载时
onMounted(() => {

});
</script>

<style scoped lang="scss">
.table-search-container {
	display: flex;
	.table-form {
		flex: 1;
		.table-form-btn-toggle {
			white-space: nowrap;
			user-select: none;
			display: flex;
			align-items: center;
			color: var(--el-color-primary);
		}
		.lsf-form-item{
          margin-left: 10px;
        }
	}
}
</style>
